<!--
 * @Author: wangming
 * @Date: 2021-05-29 15:44:34
 * @LastEditors: wangming
 * @LastEditTime: 2021-12-16 20:55:24
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="独立搜索">
      <el-radio-group v-model="value.__config.independentAdvancedSearch">
        <el-radio :label="undefined">基础搜索</el-radio>
        <el-radio :label="'ADVANCED'">高级搜索</el-radio>
      </el-radio-group>
    </el-form-item>
    <div v-if="!value.__config.independentAdvancedSearch">
      <el-form-item label="按钮位置">
        <el-radio-group v-model="value.__config.searchBtnPos">
          <el-radio :label="'right'">靠右</el-radio>
          <el-radio :label="'center'">居中</el-radio>
          <el-radio :label="'left'">靠左</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="mb10 pl5 ks-row-between">
        <div>查询条件</div>
        <el-checkbox v-model="allbox" @change="changeall">全选</el-checkbox>
      </div>
      <draggable
        handle=".mover"
        :animation="200"
        :list="value.getSearchmodelList"
        :delay="20"
        chosen-class="drawing-chosen"
        drag-class="drawing-drag"
      >
        <DragTag
          :deleteDifferIds="value.deleteDifferIds"
          :addDifferIds="value.addDifferIds"
          v-model="i.showSearch"
          @change="(status) => changebox(index, status)"
          v-for="(i, index) in value.getSearchmodelList"
          :key="index"
          :item="i"
        >
          <i class="el-icon-rank mover poi"></i>
        </DragTag>
      </draggable>
    </div>
    <SearchCom v-else :value="value.__config.advancedSearchConfig" />
  </div>
</template>

<script>
import draggable from "vuedraggable";
import basicmixins from "../basicmixins";
import DragTag from "./__components__/DragTag";
import SearchCom from "../hlSearch/index";
export default {
  components: { draggable, DragTag, SearchCom },
  mixins: [basicmixins],
  data() {
    return {
      allbox: false,
    };
  },
  created() {
    this.value.__config.advancedSearchConfig &&
      (this.value.__config.advancedSearchConfig.__config.modelCode = this.value.__config.modelCode);
  },
  mounted() {
    this.allbox = this.value.getSearchmodelList.every((i) => i.showSearch);
  },
  watch: {
    "value.__config.independentAdvancedSearch"(val) {
      if (val) {
        if (!this.value.__config.advancedSearchConfig) {
          this.$set(this.value.__config, "advancedSearchConfig", {
            name: "搜索",
            tagName: "hlSearch", // 标签名称
            childrens: [], // 条件查询
            __config: {
              singleQuantity: 2, // 单行显示数量  2 3 4 0（自定义）
              singleQuantityCustom: 1, // 单行显示数量 自定义
            },
          });
        }
        this.value.__config.advancedSearchConfig.__config.modelCode = this.value.__config.modelCode;
      }
    },
  },
  methods: {
    changebox(index, status) {
      if (status === "delete") {
        this.value.getSearchmodelList.splice(index, 1);
      }
      this.allbox = this.value.getSearchmodelList.every((i) => i.showSearch);
    },
    changeall(v) {
      this.value.getSearchmodelList = this.value.getSearchmodelList.filter(
        (i) => {
          i.showSearch = v;
          return !~this.value.deleteDifferIds.indexOf(i.id);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.mover {
  color: #409eff;
}
</style>
